<template>
    <div>
        <div style="box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px">
            欢迎你，{{user.name}}
        </div>
        <div style="display:flex;justify-content: center;align-items: center">
            <el-carousel :interval="4000" type="card" height="250px" style="width: 60%">
                <el-carousel-item v-for="item in 6" :key="item">

                </el-carousel-item>
            </el-carousel>

        </div>




        <div style="display: flex">
            <div style="flex: 1 ;height: 300px" class="polaroid">
                <img src="@/assets/register.jpg">
                <div class="container">
                    <p>Hardanger,Norway</p>
                </div>
            </div>
            <div style="flex: 1;height: 280px" class="polaroid">
                <img src="@/assets/login.jpg">
                <div class="container">
                    <p>Hardanger,Norway</p>
                </div>
            </div>
            <div style="flex: 1;" class="polaroid">
                <img src="@/assets/logo1.jpg">
                <div class="container">
                    <p>Hardanger,Norway</p>
                </div>
            </div>
            <div style="flex: 1" class="polaroid">
                <img src="@/assets/logo2.jpg">
                <div class="container">
                    <p>Hardanger,Norway</p>
                </div>
            </div>

        </div>

        <div>
            <el-row>
                <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
                    <el-card class="imaged" :body-style="{ padding: '0px' }">
                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                        <div style="padding: 14px;">
                            <span>好吃的汉堡</span>
                            <div class="bottom clearfix">
                                <time class="time">{{ currentDate }}</time>
                                <el-button type="text" class="button">操作按钮</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>


        <div style="display: flex;">
            <div style="flex: 1">
                <el-card style="height: 100px;height: 300px"></el-card>
            </div >
            <div style="flex: 1">
                <el-card style="height: 100px;height: 300px"></el-card>
            </div>
            <div style="flex: 1">
                <el-card style="height: 100px;height: 300px"></el-card>
            </div>
            <div style="flex: 1">
                <el-card style="height: 100px;height: 300px"></el-card>
            </div>
            <div style="flex: 1">
                <el-card style="height: 100px;height: 300px"></el-card>
            </div>
            <div style="flex: 1">
                <el-card style="height: 100px;height: 300px"></el-card>
            </div>

        </div>

    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
            return {
                user:JSON.parse(localStorage.getItem("honey-user")||'{}'),
                currentDate: new Date()
            }
        },
        created() {

        },
        methods:{

        }
    }

</script>

<style scoped>
    .polaroid img,.polaroid p{
        width: 250px;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        text-align: center;

    }
    .container p{
        padding:10px;
    }

    .imaged p{
        width: 200px !important;
        height: 300px !important;

    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>